<template>
  <div>
    <!-- 表格 -->
    <div class="add_table_css">
      <p
        style="color:red;font-size:14px;border-bottom:1px solid #eee; margin-bottom:20px;padding-bottom:20px"
      >业绩成果为任现职后取得成果，内容包括：从事专业技术工作起止时间、专业技术工作名称（项目、课题、成果等）、工作内容，本人起何作用（主持、参加、独立完成承担的任务及完成情况，以及名次排序）、完成情况及效益（获何奖励、专利，要有数量概念）！</p>
      <h5>业绩成果信息</h5>
      <div class="table_css">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="beginningAndEndingTime" width="120" label="起止时间"></el-table-column>
          <el-table-column prop="professionalAndTechnicalJobTitle" width="280" label="专业技术工作名称（项目、课题、成果等）"></el-table-column>
          <el-table-column prop="jobContent" width="280" label="工作内容、本人起何作用（主持、参加、独立完成）"></el-table-column>
          <el-table-column prop="completionStatusAndBenefits" width="280" label="完成情况及效益（获何奖励、专利）"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="block page_css">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        @current-change="change"
        @prev-click="prev"
        @next-click="next"
      ></el-pagination>
    </div>
    <div class="btn_div_css">
      <el-button plain @click="seeFile" class="btn_css">查看附件</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      page: 1,
      limit: 5,
      total: 0
    };
  },
  methods: {
    /* 根据当前页数和分页大小渲染页面 */
    getCon() {
      this.$axios({
        url: "/performanceStatement/list",    
        method:'post',   
        data: {
          page: this.page,
          limit: this.limit
        }
      }).then(res => {
        console.log(res.data);
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },

    /* 分页渲染 */
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },

    handleClick(row) {
      //   this.dialogFormVisible2 = true;
      console.log(row);
    },
    seeFile() {}
  },
  /* 挂载时加载 */
  mounted() {
    this.getCon();
  }
};
</script>
<style scoped lang="less">

.page_css {
  margin: 10px;
  text-align: right;
  margin-right: 135px;
}
.table_css {
  // height: 300px;
  // border: 1px solid #eee;
}
.el-table {
  font-size: 13px;
}
.add_table_css {
  border: 1px solid #eee;
  // height: 790px;
  padding: 20px;
  margin-right: 135px;
}
.btn_div_css {
  margin-top: 20px;
  margin-right: 135px;
  float: right;
  // border: 1px solid red;
}
.btn_css {
  background-color: #f5f7fa;
  border: 1px solid #eee;
  width: 150px;
  height: 40px;
  display: block;
  font-size: 14px;
}
</style>